<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动设备上屏幕显示区域的设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--主要是针对苹果手机将数字自动识别为号码-->
    <meta name="format-detection" content="telephone=no">
    <!--启用全屏模式，伪装app，离线应用。-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--隐藏状态栏/设置状态栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器-->
    <meta name="HandheldFriendly" content="True">
    <!-- 微软的老式浏览器 告诉浏览器页面为某个宽度特殊优化-->
    <meta name="MobileOptimized" content="width">
    <!--指定适合自己网站的渲染内核名称-->
    <meta name="renderer" content="webkit" />
    <title>爱投教-初级版</title>
    <link rel="stylesheet" type="text/css" href="./css/animate.min.css">
    <link rel="stylesheet" href="../css/navigation.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
<div class="navigation">
    <nav class="nav">
        <a href="../p1" class="nav-item is-active" active-color="green">初级版</a>
        <a href="../p2" class="nav-item" active-color="orange">中级版</a>
        <a href="../p3" class="nav-item" active-color="red">大师版</a>
        <span class="nav-indicator"></span>
    </nav>
</div>

<div class="container">
    <div class="content">
        <img src="./images/primary_bg.png">
        <a target="_blank" href="https://buy.homeway.com.cn/order/package?header=false&groupid=6001711"><img class="buybtn pulse animated infinite" id="buybtn" src="./images/primary_btn.png"/></a>
        <a target="_blank" href="https://buy.homeway.com.cn/order/package?header=false&groupid=6001711"><img class="bottombuybtn pulse animated infinite" id="bottombuybtn" src="./images/primary_bottombtn.png"/></a>
        <div class="hoz-menu">
            <div class="menu-item item1" id="item1"><img src="./images/menu1.png"/></div>
            <div class="menu-item item2" id="item2"><img src="./images/menug2.png"/></div>
            <div class="menu-item item3" id="item3"><img src="./images/menug3.png"/></div>
            <div class="menu-item item4" id="item4"><img src="./images/menug4.png"/></div>
            <div class="menu-item item5" id="item5"><img src="./images/menug5.png"/></div>
        </div>
        <div class="position-menu">
<!--            <img src="./images/menu_bg.png">-->
            <div class="menu-item item1" id="item11"><img src="./images/menu1.png"/></div>
            <div class="menu-item item2" id="item22"><img src="./images/menug2.png"/></div>
            <div class="menu-item item3" id="item33"><img src="./images/menug3.png"/></div>
            <div class="menu-item item4" id="item44"><img src="./images/menug4.png"/></div>
            <div class="menu-item item5" id="item55"><img src="./images/menug5.png"/></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/navigation.js"></script>
<script type="text/javascript">
    window.onload = function(){
        let BUYBTNTOP = 0.076;          // 购买按钮top比
        let BUYBTN_WH_RATIO = 4.483;    // 购买按钮宽高比
        let BUYBTN_HALL_RATIO = 0.012;  // 购买按钮高占全高比
        let BOTTOMBTNTOP = 0.967;       // 底部购买按钮top比
        let BOTTOMBTN_WH_RATIO = 3.714; // 底部购买按钮宽高比
        let BOTTOMBTN_HALL_RATIO = 0.013;  // 底部购买按钮高占全高比
        let MENUTOP = 0.121;            // menu top比
        let MENU_HALL_RATIO = 0.013;    // menu整体高度比
        let POSITIONMENU_HALL_RATIO = 0.031;    // 高与整体比
        let POSITIONMENU_WH_RATIO = 7.105;      // menu宽高比
        let POSITIONMENU_PADDINGTOP = 0.309;

        var dh = document.body.clientHeight;
        var buybtnTop = $("#buybtn").offset().top;
        var btnBuyW = $("#buybtn").width();
        var btnBuyH = $("#buybtn").height();

        var bottomBtnTop = $("#bottombuybtn").offset().top;
        var bottomBtnBuyW = $("#bottombuybtn").width();
        var bottomBtnBuyH = $("#bottombuybtn").height();

        var positionMenuW = $(".position-menu").width();
        var positionMenuH = $(".position-menu").height();

        var menuTop = $(".hoz-menu").offset().top;

        var itemH1, itemW1, itemWHRatio1, itemH2, itemW2, itemWHRatio2, itemH3, itemW3, itemWHRatio3, itemH4, itemW4, itemWHRatio4,itemH5, itemW5, itemWHRatio5;

        var top1 = 548;
        let TOPRATIO1 = 0.112;
        var top2 = 1636;
        let TOPRATIO2 = 0.334;
        var top3 = 2257;
        let TOPRATIO3 = 0.461;
        var top4 = 2882;
        let TOPRATIO4 = 0.588;
        var top5 = 3828;
        let TOPRATIO5 = 0.781;

        $(document).ready(function(){//在文档加载完毕后执行

            $("#buybtn").css("display", "block");
            $("#bottombuybtn").css("display", "block");
            $(".hoz-menu").css("visibility", "visible");

            btnBuyH = dh * BUYBTN_HALL_RATIO;
            btnBuyW = btnBuyH * BUYBTN_WH_RATIO;
            buybtnTop = BUYBTNTOP * dh;
            $("#buybtn").css("width", btnBuyW);
            $("#buybtn").css("height", btnBuyH);
            $("#buybtn").css("top", buybtnTop);
            $("#buybtn").css("margin-left", -btnBuyW/2);

            bottomBtnBuyH = dh * BOTTOMBTN_HALL_RATIO;
            bottomBtnBuyW = bottomBtnBuyH * BOTTOMBTN_WH_RATIO;
            bottomBtnTop = BOTTOMBTNTOP * dh;
            $("#bottombuybtn").css("width", bottomBtnBuyW);
            $("#bottombuybtn").css("height", bottomBtnBuyH);
            $("#bottombuybtn").css("top", bottomBtnTop);
            $("#bottombuybtn").css("margin-left", -bottomBtnBuyW/2);

            positionMenuH = dh * POSITIONMENU_HALL_RATIO;
            positionMenuW = positionMenuH * POSITIONMENU_WH_RATIO;

            $(".position-menu").css("width", positionMenuW);
            $(".position-menu").css("height", positionMenuH);
            $(".position-menu").css("margin-left", -positionMenuW/2);

            itemH1 = $(".item1").height();
            itemW1 = $(".item1").width();
            itemWHRatio1 = itemW1/itemH1;

            itemH2 = $(".item2").height();
            itemW2 = $(".item2").width();
            itemWHRatio2 = itemW2/itemH2;

            itemH3 = $(".item3").height();
            itemW3 = $(".item3").width();
            itemWHRatio3 = itemW3/itemH3;

            itemH4 = $(".item4").height();
            itemW4 = $(".item4").width();
            itemWHRatio4 = itemW4/itemH4;

            itemH5 = $(".item5").height();
            itemW5 = $(".item5").width();
            itemWHRatio5 = itemW5/itemH5;

            itemH1 = dh * MENU_HALL_RATIO;
            itemW1 = itemH1 * itemWHRatio1;
            $(".item1").css("width", itemW1);
            $(".item1").css("height", itemH1);
            itemH2 = dh * MENU_HALL_RATIO;
            itemW2 = itemH2 * itemWHRatio2;
            $(".item2").css("width", itemW2);
            $(".item2").css("height", itemH2);
            itemH3 = dh * MENU_HALL_RATIO;
            itemW3 = itemH3 * itemWHRatio3;
            $(".item3").css("width", itemW3);
            $(".item3").css("height", itemH3);
            itemH4 = dh * MENU_HALL_RATIO;
            itemW4 = itemH4 * itemWHRatio4;
            $(".item4").css("width", itemW4);
            $(".item4").css("height", itemH4);
            itemH5 = dh * MENU_HALL_RATIO;
            itemW5 = itemH5 * itemWHRatio5;
            $(".item5").css("width", itemW5);
            $(".item5").css("height", itemH5);

            menuTop = MENUTOP * dh;
            $(".hoz-menu").css("top", menuTop);

            top1 = TOPRATIO1 * dh;
            top2 = TOPRATIO2 * dh;
            top3 = TOPRATIO3 * dh;
            top4 = TOPRATIO4 * dh;
            top5 = TOPRATIO5 * dh;

            var positionMenuPaddingTop = POSITIONMENU_PADDINGTOP * positionMenuH;
            $(".position-menu").css("padding-top", positionMenuPaddingTop);


            var onResize = function() {
                var dh = document.body.clientHeight;
                btnBuyH = dh * BUYBTN_HALL_RATIO;
                btnBuyW = btnBuyH * BUYBTN_WH_RATIO;
                buybtnTop = BUYBTNTOP * dh;

                $("#buybtn").css("width", btnBuyW);
                $("#buybtn").css("height", btnBuyH);
                $("#buybtn").css("top", buybtnTop);
                $("#buybtn").css("margin-left", -btnBuyW/2);

                bottomBtnBuyH = dh * BOTTOMBTN_HALL_RATIO;
                bottomBtnBuyW = bottomBtnBuyH * BOTTOMBTN_WH_RATIO;
                bottomBtnTop = BOTTOMBTNTOP * dh;

                $("#bottombuybtn").css("width", bottomBtnBuyW);
                $("#bottombuybtn").css("height", bottomBtnBuyH);
                $("#bottombuybtn").css("top", bottomBtnTop);
                $("#bottombuybtn").css("margin-left", -bottomBtnBuyW/2);

                menuTop = MENUTOP * dh;
                $(".hoz-menu").css("top", menuTop);
                itemH1 = dh * MENU_HALL_RATIO;
                itemW1 = itemH1 * itemWHRatio1;
                $(".item1").css("width", itemW1);
                $(".item1").css("height", itemH1);
                itemH2 = dh * MENU_HALL_RATIO;
                itemW2 = itemH2 * itemWHRatio2;
                $(".item2").css("width", itemW2);
                $(".item2").css("height", itemH2);
                itemH3 = dh * MENU_HALL_RATIO;
                itemW3 = itemH3 * itemWHRatio3;
                $(".item3").css("width", itemW3);
                $(".item3").css("height", itemH3);
                itemH4 = dh * MENU_HALL_RATIO;
                itemW4 = itemH4 * itemWHRatio4;
                $(".item4").css("width", itemW4);
                $(".item4").css("height", itemH4);
                itemH5 = dh * MENU_HALL_RATIO;
                itemW5 = itemH5 * itemWHRatio5;
                $(".item5").css("width", itemW5);
                $(".item5").css("height", itemH5);

                positionMenuH = dh * POSITIONMENU_HALL_RATIO;
                positionMenuW = positionMenuH * POSITIONMENU_WH_RATIO;

                var positionMenuPaddingTop = POSITIONMENU_PADDINGTOP * positionMenuH;
                $(".position-menu").css("width", positionMenuW);
                $(".position-menu").css("height", positionMenuH);
                $(".position-menu").css("margin-left", -positionMenuW/2);
                $(".position-menu").css("padding-top", positionMenuPaddingTop);

                top1 = TOPRATIO1 * dh;
                top2 = TOPRATIO2 * dh;
                top3 = TOPRATIO3 * dh;
                top4 = TOPRATIO4 * dh;
                top5 = TOPRATIO5 * dh;

            }

            window.onresize=onResize;

            $(".menu-item").click(function(){
                $("#item1").children("img").attr("src", "./images/menug1.png");
                $("#item2").children("img").attr("src", "./images/menug2.png");
                $("#item3").children("img").attr("src", "./images/menug3.png");
                $("#item4").children("img").attr("src", "./images/menug4.png");
                $("#item5").children("img").attr("src", "./images/menug5.png");
                $("#item11").children("img").attr("src", "./images/menug1.png");
                $("#item22").children("img").attr("src", "./images/menug2.png");
                $("#item33").children("img").attr("src", "./images/menug3.png");
                $("#item44").children("img").attr("src", "./images/menug4.png");
                $("#item55").children("img").attr("src", "./images/menug5.png");
                if($(this).attr("id") == "item1" || $(this).attr("id") == "item11") {
                    $("#item1").children("img").attr("src", "./images/menu1.png");
                    $("#item11").children("img").attr("src", "./images/menu1.png");
                    $("html,body").animate({scrollTop: top1}, 100);
                }else
                if($(this).attr("id") == "item2" || $(this).attr("id") == "item22") {
                    $("#item2").children("img").attr("src", "./images/menu2.png");
                    $("#item22").children("img").attr("src", "./images/menu2.png");
                    $("html,body").animate({scrollTop: top2}, 100);
                }else
                if($(this).attr("id") == "item3" || $(this).attr("id") == "item33") {
                    $("#item3").children("img").attr("src", "./images/menu3.png");
                    $("#item33").children("img").attr("src", "./images/menu3.png");
                    $("html,body").animate({scrollTop: top3}, 100);
                }else
                if($(this).attr("id") == "item4" || $(this).attr("id") == "item44") {
                    $("#item4").children("img").attr("src", "./images/menu4.png");
                    $("#item44").children("img").attr("src", "./images/menu4.png");
                    $("html,body").animate({scrollTop: top4}, 100);
                }else
                if($(this).attr("id") == "item5" || $(this).attr("id") == "item55") {
                    $("#item5").children("img").attr("src", "./images/menu5.png");
                    $("#item55").children("img").attr("src", "./images/menu5.png");
                    $("html,body").animate({scrollTop: top5}, 100);
                }

            });

            const $ScrollWrap = $(window);
            // 监听滚动停止
            let t1 = 0;
            let t2 = 0;
            let timer = null; // 定时器
            $ScrollWrap.on("touchstart", function(){
                // 触摸开始 ≈ 滚动开始
            })
            $ScrollWrap.on("scroll", function(){
                // 滚动
                clearTimeout(timer);
                timer = setTimeout(isScrollEnd, 100);
                t1 = $ScrollWrap.scrollTop();

                //获取当前滚动条高度
                var topp = $(document).scrollTop();

                if(topp > top1) {
                    $(".position-menu").css("visibility", "visible");
                } else {
                    $(".position-menu").css("visibility", "hidden");
                }

                var topLst = top1 - 100;
                if(topp > topLst) {
                    $(".nav").css("display", "none");
                }else{
                    $(".nav").css("display", "inline-flex");
                }

                // if(topp >= top1 && topp < top2) {
                //     $("#item1").children("img").attr("src", "./images/menu1.png");
                //     $("#item2").children("img").attr("src", "./images/menug2.png");
                //     $("#item3").children("img").attr("src", "./images/menug3.png");
                //     $("#item4").children("img").attr("src", "./images/menug4.png");
                //     $("#item5").children("img").attr("src", "./images/menug5.png");
                //     $("#item11").children("img").attr("src", "./images/menu1.png");
                //     $("#item22").children("img").attr("src", "./images/menug2.png");
                //     $("#item33").children("img").attr("src", "./images/menug3.png");
                //     $("#item44").children("img").attr("src", "./images/menug4.png");
                //     $("#item55").children("img").attr("src", "./images/menug5.png");
                // } else
                // if(topp >= top2 && topp < top3) {
                //     $("#item1").children("img").attr("src", "./images/menug1.png");
                //     $("#item2").children("img").attr("src", "./images/menu2.png");
                //     $("#item3").children("img").attr("src", "./images/menug3.png");
                //     $("#item4").children("img").attr("src", "./images/menug4.png");
                //     $("#item5").children("img").attr("src", "./images/menug5.png");
                //     $("#item11").children("img").attr("src", "./images/menug1.png");
                //     $("#item22").children("img").attr("src", "./images/menu2.png");
                //     $("#item33").children("img").attr("src", "./images/menug3.png");
                //     $("#item44").children("img").attr("src", "./images/menug4.png");
                //     $("#item55").children("img").attr("src", "./images/menug5.png");
                // } else
                // if(topp >= top3 && topp < top4) {
                //     $("#item1").children("img").attr("src", "./images/menug1.png");
                //     $("#item2").children("img").attr("src", "./images/menug2.png");
                //     $("#item3").children("img").attr("src", "./images/menu3.png");
                //     $("#item4").children("img").attr("src", "./images/menug4.png");
                //     $("#item5").children("img").attr("src", "./images/menug5.png");
                //     $("#item11").children("img").attr("src", "./images/menug1.png");
                //     $("#item22").children("img").attr("src", "./images/menug2.png");
                //     $("#item33").children("img").attr("src", "./images/menu3.png");
                //     $("#item44").children("img").attr("src", "./images/menug4.png");
                //     $("#item55").children("img").attr("src", "./images/menug5.png");
                // } else
                // if(topp >= top4 && topp < top5) {
                //     $("#item1").children("img").attr("src", "./images/menug1.png");
                //     $("#item2").children("img").attr("src", "./images/menug2.png");
                //     $("#item3").children("img").attr("src", "./images/menug3.png");
                //     $("#item4").children("img").attr("src", "./images/menu4.png");
                //     $("#item5").children("img").attr("src", "./images/menug5.png");
                //     $("#item11").children("img").attr("src", "./images/menug1.png");
                //     $("#item22").children("img").attr("src", "./images/menug2.png");
                //     $("#item33").children("img").attr("src", "./images/menug3.png");
                //     $("#item44").children("img").attr("src", "./images/menu4.png");
                //     $("#item55").children("img").attr("src", "./images/menug5.png");
                // }else
                // if(topp >= top5) {
                //     $("#item1").children("img").attr("src", "./images/menug1.png");
                //     $("#item2").children("img").attr("src", "./images/menug2.png");
                //     $("#item3").children("img").attr("src", "./images/menug3.png");
                //     $("#item4").children("img").attr("src", "./images/menug4.png");
                //     $("#item5").children("img").attr("src", "./images/menu5.png");
                //     $("#item11").children("img").attr("src", "./images/menug1.png");
                //     $("#item22").children("img").attr("src", "./images/menug2.png");
                //     $("#item33").children("img").attr("src", "./images/menug3.png");
                //     $("#item44").children("img").attr("src", "./images/menug4.png");
                //     $("#item55").children("img").attr("src", "./images/menu5.png");
                // }
            })
            function isScrollEnd() {
                t2 = $ScrollWrap.scrollTop();
                if(t2 == t1){
                    //获取当前滚动条高度
                    var topp = $(document).scrollTop();

                    var top11 = top1-10;
                    var top22 = top2-10;
                    var top33 = top3-10;
                    var top44 = top4-10;
                    var top55 = top5-10;
                    // console.log("滚动停止 " + topp + "  top1: " + top11 + "  top2: " + top22 + "  top3: " + top33 + "  top4: " + top44 + "  top5: " + top55);
                    if(topp >= 0 && topp < top22) {
                        $("#item1").children("img").attr("src", "./images/menu1.png");
                        $("#item2").children("img").attr("src", "./images/menug2.png");
                        $("#item3").children("img").attr("src", "./images/menug3.png");
                        $("#item4").children("img").attr("src", "./images/menug4.png");
                        $("#item5").children("img").attr("src", "./images/menug5.png");
                        $("#item11").children("img").attr("src", "./images/menu1.png");
                        $("#item22").children("img").attr("src", "./images/menug2.png");
                        $("#item33").children("img").attr("src", "./images/menug3.png");
                        $("#item44").children("img").attr("src", "./images/menug4.png");
                        $("#item55").children("img").attr("src", "./images/menug5.png");
                    } else
                    if(topp >= top22 && topp < top33) {
                        $("#item1").children("img").attr("src", "./images/menug1.png");
                        $("#item2").children("img").attr("src", "./images/menu2.png");
                        $("#item3").children("img").attr("src", "./images/menug3.png");
                        $("#item4").children("img").attr("src", "./images/menug4.png");
                        $("#item5").children("img").attr("src", "./images/menug5.png");
                        $("#item11").children("img").attr("src", "./images/menug1.png");
                        $("#item22").children("img").attr("src", "./images/menu2.png");
                        $("#item33").children("img").attr("src", "./images/menug3.png");
                        $("#item44").children("img").attr("src", "./images/menug4.png");
                        $("#item55").children("img").attr("src", "./images/menug5.png");
                    } else
                    if(topp >= top33 && topp < top44) {
                        $("#item1").children("img").attr("src", "./images/menug1.png");
                        $("#item2").children("img").attr("src", "./images/menug2.png");
                        $("#item3").children("img").attr("src", "./images/menu3.png");
                        $("#item4").children("img").attr("src", "./images/menug4.png");
                        $("#item5").children("img").attr("src", "./images/menug5.png");
                        $("#item11").children("img").attr("src", "./images/menug1.png");
                        $("#item22").children("img").attr("src", "./images/menug2.png");
                        $("#item33").children("img").attr("src", "./images/menu3.png");
                        $("#item44").children("img").attr("src", "./images/menug4.png");
                        $("#item55").children("img").attr("src", "./images/menug5.png");
                    } else
                    if(topp >= top44 && topp < top55) {
                        $("#item1").children("img").attr("src", "./images/menug1.png");
                        $("#item2").children("img").attr("src", "./images/menug2.png");
                        $("#item3").children("img").attr("src", "./images/menug3.png");
                        $("#item4").children("img").attr("src", "./images/menu4.png");
                        $("#item5").children("img").attr("src", "./images/menug5.png");
                        $("#item11").children("img").attr("src", "./images/menug1.png");
                        $("#item22").children("img").attr("src", "./images/menug2.png");
                        $("#item33").children("img").attr("src", "./images/menug3.png");
                        $("#item44").children("img").attr("src", "./images/menu4.png");
                        $("#item55").children("img").attr("src", "./images/menug5.png");
                    }else
                    if(topp >= top55) {
                        $("#item1").children("img").attr("src", "./images/menug1.png");
                        $("#item2").children("img").attr("src", "./images/menug2.png");
                        $("#item3").children("img").attr("src", "./images/menug3.png");
                        $("#item4").children("img").attr("src", "./images/menug4.png");
                        $("#item5").children("img").attr("src", "./images/menu5.png");
                        $("#item11").children("img").attr("src", "./images/menug1.png");
                        $("#item22").children("img").attr("src", "./images/menug2.png");
                        $("#item33").children("img").attr("src", "./images/menug3.png");
                        $("#item44").children("img").attr("src", "./images/menug4.png");
                        $("#item55").children("img").attr("src", "./images/menu5.png");
                    }

                    clearTimeout(timer);
                }
            }

        })
    }

</script>
</body></html>